<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/fabric@4.6.0/dist/fabric.min.js"></script>
</head>
<body>
  <canvas width="400" height="400" id="c" style="border: 1px solid #ccc;"></canvas>
  <script>
    // 可拖拽
    const canvas = new fabric.Canvas('c') // 这里传入的是canvas的id
    // 创建一个长方形
    const rect = new fabric.Rect({
      top: 30, // 距离容器顶部 30px
      left: 30, // 距离容器左侧 30px
      width: 100, // 宽 100px
      height: 60, // 高 60px
      fill: 'red' // 填充 红色
    })

    // 在canvas画布中加入矩形（rect）。add是“添加”的意思
    canvas.add(rect)

  </script>
</body>
</html>